// router/index.js  
import { createRouter, createWebHashHistory } from 'vue-router';  
import { useAuthStore } from '@/stores/auth'; 
import { ref, watch } from "vue";

import Home from '@/views/appweb/HomeView.vue';  
import About from '@/views/appweb/AboutView.vue';  
import Login from '@/views/appweb/login.vue';
import Shen from '@/views/appweb/shen.vue';  
 
import home from '@/views/appmobie/HomeView.vue';  
import about from '@/views/appmobie/AboutView.vue';  
import login from '@/views/appmobie/login.vue';
import shen from '@/views/appmobie/shen.vue';
// const router = createRouter({  
//   history: createWebHashHistory(),  
//   routes: [  
//     {  
//       path: '/',  
//       name: 'Home',  
//       component: Home,
      
//       meta: { requiresAuth: true }

//     }, 
//     {  
//       path: '/shen',  
//       name: 'Shen',  
//       component: Shen,
//       meta: { requiresAuth: true }   
//     }, 
//     {  
//       path: '/about',  
//       name: 'About',  
//       component: About,  
//       meta: { requiresAuth: true } // 标记为需要登录的路由  
//     },  
//     {  
//       path: '/login',  
//       name: 'Login',  
//       component: Login  
//     }  
//   ]  
// });  
 



const routesPc =  [
    {  
      path: '/',  
      name: 'Home',  
      component: Home,
      
      meta: { requiresAuth: true }

    }, 
    {  
      path: '/shen',  
      name: 'Shen',  
      component: Shen,
      meta: { requiresAuth: true }   
    }, 
    {  
      path: '/about',  
      name: 'About',  
      component: About,  
      meta: { requiresAuth: true } // 标记为需要登录的路由  
    },  
    {  
      path: '/login',  
      name: 'Login',  
      component: Login  
    }  
]


// 移动端路由表
const routesMB = [
  {  
    path: '/',  
    name: 'Home',  
    component: home,
    
    meta: { requiresAuth: true }

  }, 
  {  
    path: '/shen',  
    name: 'Shen',  
    component: shen,
    meta: { requiresAuth: true }   
  }, 
  {  
    path: '/about',  
    name: 'About',  
    component: about,  
    meta: { requiresAuth: true } // 标记为需要登录的路由  
  },  
  {  
    path: '/login',  
    name: 'Login',  
    component: login  
  }  

]

// 声明变量用来接routers
var routes = [];
const screenWidth = ref()
// 获取页面宽度
screenWidth.value = document.body.clientWidth
if (screenWidth.value <= 758) {
  console.log('is Mobile');
  routes = routesMB
} else {
  routes = routesPc
}
window.onresize = () => {
  screenWidth.value = document.body.clientWidth;
};
// 监听页面宽度
watch(screenWidth, (newVal, oldVal) => {
  let timer = setTimeout(() => {
      if (newVal <= 758) {
          // 小于758就是移动端 就把移动端路由表赋给routes
          console.log('is Mobile');
          routes = routesMB
          window.location.reload()
      } else {
          // 大于就是pc端，把pc端路由表赋给routes
          routes = routesPc
          window.location.reload()
      }
      // 重绘页面
  }, 500)
  return () => {
      // 清除定时器
      clearTimeout(timer)
  }
}, {
  // 深度清除
  deep: true,
})


const router = createRouter({
  routes,
  history: createWebHashHistory()
})
router.beforeEach((to, from, next) => {  
  const authStore = useAuthStore();  
  if (to.matched.some(record => record.meta.requiresAuth)) {  
    // 需要登录的路由  
    if (authStore.isLoggedIn) {  
      // 用户已登录，继续导航  
      next();  
    } else {  
      // 用户未登录，重定向到登录页面  
      next({ name: 'Login', query: { redirect: to.fullPath } });  
    }  
  } else {  
    // 不需要登录的路由，直接导航  
    next();  
  }  
});  
  
export default router;